<%= include ic/header.html %>
<style>
#nav_my{color:#fff}
body{background:#f7f7f7;}
footer{display:none;}
#main{text-align:center;}
#content{width:100%;margin:auto;}
@media only screen and (min-width: 1008px){
  #content{width:80%;min-width:1008px;}
}
#btnBack{padding-left:1rem;margin-top:1rem;}
#ctrlBar span{height:60px;line-height:70px;float:left;padding-left:15px;}
#ctrlBar span a{color:#444;font-size:2rem;}
#imgList>li{overflow:hidden;border:15px solid #f7f7f7;cursor:pointer;}
#imgList>li img{width:auto;height:auto;}
</style>
<div id="main" class="am-cf">
<%= include ic/my_banner.html %>
<div id="mynav">
  <div class="nav" onclick="gotoUrl('/my/photostream')">Photostream</div>
  <div class="nav c" onclick="gotoUrl('/my/album')">Ablums</div>
  <div class="nav" onclick="gotoUrl('/my/trip')">Trips</div>
  <div class="nav" onclick="gotoUrl('/my/favorite')">Favorites</div>
  <div class="nav" onclick="gotoUrl('/my/comment')">Comments</div>
</div>
<div id="content">
  <% if(addimg){ %>
  <div id="btnBack"><a href="javascript:history.go(-1);"><i class="am-icon-caret-left"></i> BACK</a></div>
  <% }else{ %>
  <div id="ctrlBar" class="am-cf">
    <span><a herf="/my/album/create">+ Create new album</a></span>
  </div>
  <% } %>
  <ul id="imgList" class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 am-cf">
    <% for(var i=0;i<results.length;i++){ %>
    <li <% if(addimg){ %>onclick="gotoUrl('/my/album/addphotos?ids=<%= ids %>&id=<%= results[i].id %>')"<% }else{ %>onclick="gotoUrl('/my/album/detail?id=<%= results[i].id %>')"<% } %>>
      <img src="/p?id=<%= results[i].get('cover').id %>&w=600" onload="fixImg()" >
    </li>
    <% } %>
  </ul>
</div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
$(function() {
  $(window).resize(function(){
    fixImg();
  });
});

function fixImg(){
  $("#imgList>li").height($("#imgList div").first().width());
  $("#imgList>li").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("img").width()/$(this).children("img").height()>1){
      $(this).children("img").height(w);
      $(this).children("img").css("width","auto");
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
    }
  });
}
</script>
